<template>
  <div class="my-info">
    <!-- 选择城市 -->
    <mt-index-list :show-indicator="true" v-if="cityVisible">
      <mt-index-section
        :index="item.title"
        v-for="(item, index) in cityArr"
        :key="index"
      >
        <mt-cell
          :title="i"
          v-for="(i, index) in item.lists"
          :key="index"
          @click.native="selectedCity(i)"
        ></mt-cell>
      </mt-index-section>
    </mt-index-list>
    <div class="content">
      <!-- 头部 -->
      <div class="head-icon">
        <div class="icon-img">
          <div class="img-con">
            <img :src="myImg" alt="我的头像" width="100px" />
          </div>
          <!-- <div class="head-text">
                        更换头像
                    </div> -->
        </div>
      </div>
      <!-- 个人信息 -->
      <div class="info-con">
        <div class="username detail" @click="editUsername">
          <div>账&nbsp;号：</div>
          <div style="color: gray">{{ username }}</div>
        </div>
        <hr />
        <div class="birthday detail" @click="editEmial">
          <div>邮&nbsp;箱：</div>
          <div style="color: gray">{{ email }}</div>
        </div>
        <hr />
        <div class="name detail" @click="editName">
          <div>昵&nbsp;称：</div>
          <div style="color: gray">{{ name }}</div>
        </div>
        <hr />
        <div class="sex-con detail" @click="sexVisible = true">
          <div>性&nbsp;别：</div>
          <div v-if="sex == 0" style="color: gray">
            <div class="sex">
              <span>女</span>
              <img src="../../assets/img/member/sex0.png" alt="" width="18px" />
            </div>
          </div>
          <div class="sex" v-else>
            <div>
              <span>男</span>
              <img src="../../assets/img/member/sex1.png" alt="" width="18px" />
            </div>
          </div>
        </div>
        <hr />
        <div class="birthday detail" @click="openPicker">
          <div>生&nbsp;日：</div>
          <div style="color: gray">{{ birthday }}</div>
        </div>
        <hr />
        <div class="city detail" @click="cityVisible = true">
          <div>城&nbsp;市：</div>
          <div style="color: gray">{{ city }}</div>
        </div>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="sub-btn">
      <div class="save" @click="changeInfo">
        <button>保存</button>
      </div>
      <div class="exit" @click="exitReg">
        <button>退出登录</button>
      </div>
    </div>
    <!-- 弹框操作 -->
    <!-- 选择性别 -->
    <mt-actionsheet :actions="sexActions" v-model="sexVisible">
    </mt-actionsheet>
    <!-- 选择生日 -->
    <mt-datetime-picker
      type="date"
      ref="picker"
      v-model="defaultDate"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm"
      :startDate="startDate"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import cityData from "../../assets/jsonData/city.json";
import { Toast } from "mint-ui";
export default {
  name: "",
  data() {
    return {
      myImg: "",
      username: "101",
      name: "",
      sex: 0,
      birthday: "",
      city: "",
      email: "",
      sexVisible: false,
      sexActions: [
        {
          id: "0",
          name: "女",
          method: this.select,
        },
        {
          id: "1",
          name: "男",
          method: this.select,
        },
      ],
      defaultDate: "1990-01-01", //默认时间
      startDate: new Date("1990-01-01"), //起始时间
      cityVisible: false,
    };
  },
  watch: {
    sex(val, oldVal) {
      //普通的watch监听
      if (val == 0) {
        this.myImg = require("../../assets/img/member/girl.jpg");
      } else {
        this.myImg = require("../../assets/img/member/boy.jpg");
      }
    },
  },
  created() {
    this.myImg = this.$route.query.img;
    this.sex = this.$route.query.sex;
    this.name = window.JSON.parse(localStorage.getItem("UserInfo")).name;
    this.username = window.JSON.parse(
      localStorage.getItem("UserInfo")
    ).username;
    this.city = window.JSON.parse(localStorage.getItem("UserInfo")).city;
    this.birthday = window.JSON.parse(
      localStorage.getItem("UserInfo")
    ).birthday;
    this.email = window.JSON.parse(localStorage.getItem("UserInfo")).email;
    this.getCity(cityData);
  },
  activated() {
    this.cityVisible = false;
  },
  methods: {
    // 获取城市
    getCity(cityData) {
      // 读取json文件
      this.cityArr = cityData.city;
    },
    // 编辑用户名
    editUsername() {
      Toast("不能修改账号");
    },
    // 编辑邮箱
    editEmial() {
      Toast("不能修改邮箱");
    },
    // 编辑昵称
    editName() {
      this.$messagebox({
        $type: "prompt",
        title: "请输入昵称",
        message: " ",
        showInput: true,
        showCancelButton: true,
        confirmButtonText: "提交",
        cancelButtonText: "取消",
      })
        .then(({ value, action }) => {
          if (action == "confirm") {
            this.name = value;
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 选择性别
    select(item) {
      this.sex = item.id;
      this.sexVisible = false;
    },
    //打开时间弹出 2019/10/16
    openPicker() {
      if (this.birthday) {
        this.defaultDate = this.birthday;
      } else {
        this.defaultDate = new Date();
      }
      this.$refs.picker.open();
    },
    //选择时间后确认 2019/10/16
    handleConfirm(data) {
      this.birthday = this.formatDate(data);
    },
    //时间格式化 2019/10/16
    formatTen(num) {
      return num > 9 ? num + "" : "0" + num;
    },
    formatDate(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + "-" + this.formatTen(month) + "-" + this.formatTen(day);
    },
    // 选择城市
    selectedCity(city) {
      this.cityVisible = false;
      this.city = city;
    },
    // 点击保存，修改数据库中的内容
    changeInfo() {
      let params = {
        username: this.username,
        sex: this.sex,
        birthday: this.birthday,
        city: this.city,
        name: this.name,
      };
      this.$http.post("/changeUserInfo", params).then((res) => {
        if (res.data.errcode === 200) {
          Toast("修改成功！！！");
          let arr = {
            username: this.username,
            identity: 2,
            name: this.name,
            sex: this.sex,
            birthday: this.birthday,
            city: this.city,
            email: this.email,
          };
          localStorage.setItem("UserInfo", window.JSON.stringify(arr));
        }
      });
    },
    // 跳转到登录界面
    exitReg() {
      // localStorage.clear();
      localStorage.removeItem("UserInfo");
      localStorage.removeItem("identityResult");
      localStorage.setItem("UserInfo", "");
      localStorage.setItem("identityResult", 1);
      this.$router.push("/idssp/home");
      this.$router.go(0);
    },
  },
};
</script>
<style lang="scss" scoped>
.my-info {
  margin-top: -10px;
  .content {
    background-color: #faedc1;
    // display: flex;
    padding-bottom: 20px;
    .head-icon {
      padding-top: 20px;
      padding-bottom: 20px;
      .icon-img {
        margin: 0 auto;
        width: 100px;
        height: 130px;
        .img-con {
          width: 90px;
          height: 90px;
          border: 1px solid #fff;
          border-radius: 100%;
          overflow: hidden;
          img {
            margin-top: -5px;
            margin-left: -5px;
          }
        }
        .head-text {
          text-align: center;
          padding-top: 10px;
          font-size: 15px;
          color: rgb(240, 118, 37);
        }
      }
    }
    .info-con {
      font-size: 17px;
      .detail {
        padding: 0px 20px;
        color: #1e1e1e;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
      }
      .sex {
        vertical-align: middle;
      }
    }
  }
  .sub-btn {
    display: flex;
    justify-content: space-around;
    padding: 20px 5px;
    button {
      width: 150px;
      height: 40px;
      border-radius: 20px;
      background-color: rgba(77, 77, 77, 0.2);
    }
  }
}
</style>